<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>余额明细</title>
    <meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
    <meta content="yes" name="apple-mobile-web-app-capable" />
    <meta content="black" name="apple-mobile-web-app-status-bar-style" />
    <meta content="telephone=no" name="format-detection" />
    <link href="/css/rechargeRecords.css" rel="stylesheet" type="text/css" />
</head>

<body>
    <div class="main">
        <div class="banner">
            <div class="recharge">
                <div  class="recharge-item no-actions" disabled="disabled">
                    <div  class="body">
                        <h3  class="name">默认账户</h3>
                        <div  class="price-wrap">
                            <h2 ><span  style="font-size: 18px;">￥</span>0.00</h2><a
                                href="" class="btn router-link-active"
                                >充值</a>
                        </div>
                        <div  class="gift"><span >本金 ￥0.00</span><span>赠额 ￥0.00</span></div>
                    </div>
                    <!---->
                    <!---->
                </div>
            </div>
        </div>

        <div class="tab">
            <p class="on" onclick="onTab(0)">充值</p>
            <p onclick="onTab(1)">消费</p>
            <div class="line" ></div>
        </div>

        <div class="detail">
            <!-- <p class="title">余额明细</p> -->
            <div class="list">
                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>

                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>

                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>
                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>
                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>
                <div class="item">
                    <div class="show-top">
                        <p>手工变更余额</p>
                        <p>+1200</p>
                    </div>
                    <p class="time">2019-05-21 10:29:39</p>
                </div>
            </div>
        </div>
        <div class="empty">已经加载完毕了</div>
    </div>


    <div class="footer">
        <p>
            <a href="#">店铺主页</a><a href="#">会员中心</a><a href="#">关注店铺</a>
        </p>
        <p>由 眼管家 提供技术支持</p>
    </div>

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
    <script>
       function onTab(index){
            // console.log($('.tab p')[1])
            let tabp = $('.tab p')
            tabp[0].className = tabp[0].className=='on'?'':'on'
            tabp[1].className = tabp[1].className=='on'?'':'on'
            $('.tab .line').css(index==0?{'left': 'calc(25% - 14px)'}:{'left': 'calc(75% - 14px)'})

       }
    </script>
</body>

</html>